<template>
  <div ref="editor" :style="{ width: '100%', height: '500px' }"></div>
</template>

<script>
import ace from 'ace-builds/src-noconflict/ace';
// import 'ace-builds/src-noconflict/theme-monokai';
// import 'ace-builds/src-noconflict/mode-javascript';

export default {
  name: 'AceEditor',
  props: {
    content: {
      type: String,
      default: '',
    },
    mode: {
      type: String,
      default: 'javascript',
    },
    theme: {
      type: String,
      default: 'monokai',
    },
  },
  watch: {
    content(newValue) {
      if (this.editor.getValue() !== newValue) {
        this.editor.setValue(newValue, -1);
      }
    },
    // mode(newValue) {
    //   // this.editor.session.setMode(`ace/mode/${newValue}`);
    // },
    // theme(newValue) {
    //   // this.editor.setTheme(`ace/theme/${newValue}`);
    // },
  },
  mounted() {
    console.log(ace);
    this.editor = ace.edit(this.$refs.editor);
    // this.editor.setTheme(`ace/theme/${this.theme}`);
    // this.editor.session.setMode(`ace/mode/${this.mode}`);
    this.editor.setValue(this.content, -1);

    this.editor.on('change', () => {
      this.$emit('update:content', this.editor.getValue());
    });
  },
  beforeDestroy() {
    this.editor.destroy();
  },
};
</script>

<style scoped>
/* 这里可以添加额外的样式 */
</style>
